// --- color ---
.c-text--grey {
  color: grey;
}

// --- bootstrap color ---
.c-bs-primary {
  color: #337ab7;
}

.c-bs-success {
  color: #5cb85c
}

.c-bs-info {
  color: #5bc0de
}

.c-bs-warning {
  color: #f0ad4e
}

.c-bs-danger {
  color: #d9534f;
}

.c-bs-gray {
  color: #eee;
}

.drop-up .Select-menu-outer {
  top: auto;
  bottom: 100%;
  margin-top: 0px;
  margin-bottom: -1px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: none;
}

.drop-up.is-open > .Select-control {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.sample-molecule-identifier {
  margin: 15px 0;
}

.Select {
  line-height: 1;
}


.span-checkbox {
  -webkit-border-radius: 0;
  border-radius: 0;
  background-color: rgba(255,255,255,.05);
  border: 1px solid rgba(155,155,155,.57);
  height: 17px;
  margin: 0 0px 0px 1px;
  outline: 0;
  width: 17px;
  position: relative;
  display: inline-block;
  text-align: center;
}

.span-checkbox:hover {
  border: 2px solid #b2b2b2;
}

.all-checkbox {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  user-select: none;
  cursor: default;

  .checkbox-dropdown {
    line-height: 1em;
    border: 1px solid rgba(155, 155, 155, 0.57);
    width: 48px;
    height: 28px;
    display: table-cell;
    vertical-align: middle;
    border-radius: 2px;
    padding-left: 5px;
    background-color: #f5f5f5;
  }

  .checkbox-options {
    z-index: 2;
    width: 166px;
    border: 1px solid #ccc;
    background: #fff;
    position: absolute;

    div {
      padding: 6px 44px 6px 30px;
      cursor: pointer;
    }

    div:hover {
      background-color: #eee;
      border-color: #eee;
      border-style: dotted;
      border-width: 1px 0;
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
}

.all-checkbox:hover {
  border: 1px solid #c6c6c6;
  color: #333;
}

.advanced-search {
  margin-top: 10px;

  .adv-search-row {
    display: flex;
    overflow: visible !important;
  }

  button {
    margin-left: 5px;
  }

  .field-select {
    margin: 5px;
    flex: 0 0 205px;
  }

  .link-select {
    margin: 5px;
    flex: 0 0 117px
  }

  .match-select {
    margin: 5px;
    flex: 0 0 150px
  }

  .value-select {
    margin: 5px;
    height: 60px;
  }

  .footer {
    margin: 10px;
    z-index: 1;
  }
}

.loading-modal {
  .modal-content {
    height: 100px;
    text-align: center;
    margin: auto;
    padding-top: 25px;
    width: 100px;
  }
}

.spacer-10 {
  margin: 0 10px;
}

.numeric-input-unit {
  .input-group-btn button {
    padding-left: 2px;
    padding-right: 2px;
  }
}
